<template>
	<div>
		<!--新增按钮-->
		<div class="add_btn_wrap">
			<el-button @click="addNewSiteInfo" type="primary" icon="document">新增站点</el-button>
		</div>
		<!-- 搜索 -->
		<div class="">
			<div class="down_search_wrap">
				<div class="search_btn_wrap" style="width: 150px;">
					<el-button @click="exportBtn" class="s_btn_up" style="width: 120px;display: block;margin-bottom: 6px;">导出</el-button>
					<el-button @click="searchBtn" type="primary" class="s_btn_down" style="width: 120px;display: block;margin: 0;">查询</el-button>
				</div>
				<div v-for="item in config.search.search_input" class="input_wrap">
					<label class="label" for="">{{item.placeholder}}：</label>
					<el-input :placeholder="'请输入'+item.placeholder" v-model="data.exchanged.search[item.name]" size="small" clearable>
					</el-input>
				</div>
				<div class="select_input_wrap" v-for="items in config.search.search_select">
					<label class="label" for="">{{items.placeholder}}：</label>
					<el-select v-model="data.exchanged.search[items.name]" :placeholder="items.placeholder" :multiple="items.multiple" :filterable="items.filterable" size="small" clearable>
						<el-option v-for="(item, index) in data.received.search[items.name]" :key="item.index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</div>
				<!-- 省市区 -->
				<div class="input_wrap">
					<label class="label" for="">地址：</label>
					<VDistpicker :province="data.exchanged.search.province" :city="data.exchanged.search.city" :area="data.exchanged.search.area" @province="onChangeProvince3" @city="onChangeCity3" @area="onChangeArea3">
					</VDistpicker>
				</div>
			</div>
		</div>
		<!-- 内容 -->
		<div class="">
			<el-table :data="data.received.table" stripe="stripe" :border='true' :row-class-name="tableRowClassName" element-loading-text="拼命加载中" style="width: 100%">
				<!-- 表格主体 -->
				<el-table-column label="站点">
					<template slot-scope="scope">
						<span @click="ToDetail(scope.row)" style="color: #409eff;cursor: pointer;">{{ scope.row.name }}</span>
					</template>
				</el-table-column>
				<template v-for="i in config.table.show.items.length">
					<el-table-column :sortable="config.table.sort[config.table.show.prop[i-1]]" :label="config.table.show.items[i-1]" :prop="config.table.show.prop[i-1]" :width="config.table.show.width[i-1]"></el-table-column>
				</template>
				<el-table-column label="操作" v-if="config.table.operate" :width="config.table.operate.width">
					<template slot-scope="scope">
						<el-button v-if="scope.row.status == 1" @click="TingYongBtn(scope.row)" size="small">停用</el-button>
						<el-button v-if="scope.row.status == 2" @click="QiYongBtn(scope.row)" size="small">启用</el-button>
						<el-button @click="XiuGaiBtn(scope.row)" size="small">修改</el-button>
						<el-button v-if="true" @click="deleteBtn(scope.row)" type="danger" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页-->
		<div class="page_wrap">
			<page-model :data="data" :config="config.page" :dataCount="data.received.count" :limit="data.exchanged.search.limit" :currentPage="data.exchanged.search.page"></page-model>
		</div>
		<!-- 新增弹窗 -->
		<el-dialog :title="Add.config.title" :visible.sync="Add.dialogFormVisible" center>
			<el-form ref="form" :model="Add.data.form" :rules="Add.config.rules" label-width="130px">
				<!--单选下拉框-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.select">
					<el-select v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<!--多选下拉框类型-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.multipleSelect">
					<el-select v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<!-- 普通输入类型 -->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.input">
					<el-input v-model.trim="Add.data.form[item.prop]" class="h-40 w-200" :maxlength="255" :placeholder="item.placeholder"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="Add.dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="commitAdd">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	import pageModel from 'components/Common/page-model.vue'
	import VDistpicker from 'v-distpicker'
	export default {
		components: {
			pageModel,
			VDistpicker
		},
		data() {
			return {
				Add: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							express_number: '',
							pickup_code: '',
							iphone: '',
							express_company: '',
						},
						selectData: {
							express_company: [{
								label: '圆通快递',
								value: 1
							}, {
								label: '韵达快递',
								value: 2
							}],
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '录入包裹',
						form: {
							input: [{
									prop: 'express_number',
									label: '运单号',
									placeholder: '请输入运单号',
								},
								{
									prop: 'pickup_code',
									label: '取件码',
									placeholder: '请输入取件码',
								},
								{
									prop: 'iphone',
									label: '手机号',
									placeholder: '请输入手机号',
								}
							],
							select: [{
								label: '快递公司',
								prop: 'express_company',
								placeholder: '请选择快递公司',
							}]
						},
						rules: {
							Remark: [{
								required: true,
								message: '请输入账户变动详情 备注'
							}]
						}
					}
				},
				Edit: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							express_number: '',
							pickup_code: '',
							iphone: '',
							express_company: '',
						},
						selectData: {
							express_company: [{
								label: '圆通快递',
								value: 1
							}, {
								label: '韵达快递',
								value: 2
							}],
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '修改包裹',
						form: {
							input: [{
									prop: 'express_number',
									label: '运单号',
									placeholder: '请输入运单号',
								},
								{
									prop: 'pickup_code',
									label: '取件码',
									placeholder: '请输入取件码',
								},
								{
									prop: 'iphone',
									label: '手机号',
									placeholder: '请输入手机号',
								}
							],
							select: [{
								label: '快递公司',
								prop: 'express_company',
								placeholder: '请选择快递公司',
							}]
						},
						rules: {

						}
					}
				},
				config: {
					baseApi: 'AdminApi/userList/List',
					search: {
						search_input: [{
								name: 'managerPhone',
								placeholder: '负责人电话',
								size: 'large'
							},
							{
								name: 'siteName',
								placeholder: '站点名称',
								size: 'large'
							}
						],
						search_select: [
							{
								name: 'status',
								placeholder: '站点状态',
								size: 'large',
								multiple: false,
								filterable: false,
							},
							{
								name: 'type',
								placeholder: '属性',
								size: 'large',
								multiple: false,
								filterable: false,
							}
						],
						date: [{
							name: 'time',
							type: 'daterange',
							separator: '-',
							size: 'small',
							placeholder: '-',
						}]
					},
					table: {
						sort: {
							rentMoney: true
						},
						show: {
							prop: [
								'typeText',
								'account',
								'startEnd',
								'rentMoney',
								'allAdr',
								'managerName',
								'managerMobile',
								'statusText'
							],
							items: [
								'属性',
								'后台账号',
								'门店租聘时间',
								'租金/月',
								'站点地址',
								'负责人',
								'负责人电话',
								'站点状态'
							],
							width: []
						},
						operate: {
							edit: true,
							deleteBtn: true, //删除
						}
					},
					page: {
						limits: [5, 10, 20, 50, 100],
						layout: 'total, sizes, prev, pager, next, jumper'
					},
				},
				data: {
					received: {
						table: [],
						count: 10,
						search: {
							status: [{
									name: '全部',
									id: ''
								},
								{
									name: '正常',
									id: '1'
								},
								{
									name: '停用',
									id: '2'
								}
							],
							type: [{
									name: '全部',
									id: ''
								},
								{
									name: '直营 ',
									id: '1'
								},
								{
									name: '加盟',
									id: '2'
								}
							]
						}
					},
					exchanged: {
						search: {
							limit: 10,
							page: 1,
							province: '',
							city: '',
							area: '',
							status: '',
							siteName: '',
							type: '',
							managerPhone: ''
						},
						multipleSelection: [],
						isDelete: 0,
						date: {
							time: '',
						}
					}
				}
			}
		},
		created() {
			this.tableData();
			// 延迟绑定监听
			this.$watch('data.exchanged.search.limit', {
				deep: true,
				handler: function() {
					this.tableData()
				}
			})
			this.$watch('data.exchanged.search.page', {
				deep: true,
				handler: function() {
					_g.openGlobalLoading()
					this.tableData()
				}
			})
		},
		methods: {
			tableData() {
				let obj = this.data.exchanged.search;
				let page = obj.page - 1;
				this.apiGet("/api/backend/base/site/list?page=" + page + "&count=" + obj.limit + "&province=" +
						obj.province + "&city=" + obj.city + "&area=" + obj.area + "&status=" +
						obj.status + "&siteName=" + obj.siteName + "&type=" + obj.type +
						"&managerPhone=" + obj.managerPhone)
					.then(res => {
						res.data.sites.map(i => {
							i.startEnd = i.rentStartDate + '-' + i.rentEndDate;
							i.allAdr = i.address.province + i.address.city + i.address.area + i.address.detail;
							i.managerName = i.manager.name;
							i.managerMobile = i.manager.mobile;
							switch(i.type) {
								case 1:
									i.typeText = '直营';
									break;
								case 2:
									i.typeText = '加盟';
									break;
								default:
									break;
							}
							switch(i.status) {
								case 1:
									i.statusText = '正常';
									break;
								case 2:
									i.statusText = '停用';
									break;
								default:
									break;
							}
						})
						this.data.received.table = res.data.sites
						this.data.received.count = res.data.sites.length
						_g.closeGlobalLoading();
					})
			},
			commitAdd() {
				console.log('this.Add.data.form', this.Add.data.form)
			},
			sendAllMessage() {
				this.$confirm('此操作将给用户发送消息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '发送成功！'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			addNewSiteInfo() {
				this.$router.push({
					path: '/newsiteinfo'
				})
			},
			TingYongBtn(row) {
				this.apiPost('/api/backend/base/site/close', {
					siteId: row.siteId
				}).then(res => {
					if(res.code == 200) {
						this.tableData();
					}
				})
			},
			QiYongBtn(row) {
				this.apiPost('/api/backend/base/site/open', {
					siteId: row.siteId
				}).then(res => {
					if(res.code == 200) {
						this.tableData();
					}
				})
			},
			XiuGaiBtn(row) {
				this.$router.push({
					name: '修改站点信息',
					query: {
						siteId: row.siteId
					}
				})
			},
			deleteBtn(row) {
				let that = this;
				this.$confirm('此操作将永久删除该站点, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.apiPost('/api/backend/base/site/remove', {
						siteId: row.siteId
					}).then(res => {
						if(res.code == 200) {
							that.tableData();
						}
					})
				}).catch(() => {
				});
			},
			//导出按钮
			exportBtn() {
				let obj = this.data.exchanged.search;
				window.location.href = axios.defaults.baseURL+"/api/backend/base/sender-mail/export?siteId=" +
					obj.siteId + "&expressCompanyId=" + obj.expressCompanyId + "&status=" + obj.status + "&waybillNumber=" +
					obj.waybillNumber + "&senderMobile=" + obj.senderMobile + "&startDate=" + obj.startDate +
					"&endDate=" + obj.endDate;
			},
			searchBtn() {
				this.tableData();
			},
			ToDetail(row) {
				this.$router.push({
					name: '站点信息详情',
					query: {
						siteId: row.siteId
					}
				})
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if(row.status == 2) {
					return 'tingyongClass';
				}
				return '';
			},
			onChangeProvince3(data) {
				if(data.value == '省') {
					this.data.exchanged.search.province = ''
				} else {
					this.data.exchanged.search.province = data.value;
				}
			},
			onChangeCity3(data) {
				this.data.exchanged.search.city = data.value;
			},
			onChangeArea3(data) {
				this.data.exchanged.search.area = data.value;
			}
		},

		mixins: [http]
	}
</script>
<style scoped>
	.add_btn_wrap {
		background: rgba(250, 250, 250, 1);
		padding: 10px 30px;
		text-align: right;
	}
	
	.page_wrap {
		text-align: center;
		padding: 30px;
	}
	
	.tingyongClass {
		background: #ccc;
	}
</style>
<style>
	.distpicker-address-wrapper {
		line-height: 46px;
		display: inline-block;
	}
	
	.distpicker-address-wrapper select {
		padding: 0;
		height: 32px;
		font-size: 14px;
		line-height: 1;
	}
</style>